<template>
	<div class="fixed-header">
		<van-sticky>
			<div class="topdropdown">
				<van-dropdown-menu>
					<van-dropdown-item v-model="value1" :options="option1" />
					<van-dropdown-item v-model="value2" :options="option2" />
				</van-dropdown-menu>
				<div class="dropdownLeft" v-if="value1"></div>
				<div class="dropdownRight" v-if="value2"></div>
			</div>
			<!--      <div class="btnBox" v-if="mark === 'consumptionVip'">-->
			<!--        <span>日期</span>-->
			<!--      </div>-->
			<div class="searchBox">
				<van-search v-model="searchValue" :placeholder="placeholder" @search="handleSearch">
					<template #right-icon>
						<div class="search-confirm" @click.stop="handleSearch">
							<span style="margin-right: 10px">|</span>
							<span class="search-text">搜索</span>
						</div>
					</template>
				</van-search>
			</div>
		</van-sticky>
	</div>
</template>

<script setup>
	import {
		defineProps,
		ref
	} from 'vue'
	const searchValue = ref('');
	const value = ref('');
	const prop = defineProps({
		mark: {
			type: String,
			default: ''
		},
		placeholder: {
			type: String,
			default: '请输入IMEI/设备名称/手机号'
		}
	})
	const value1 = ref(1);
	const value2 = ref('a');
	const option1 = [{
		text: '全部商品',
		value: 1
	}, {
		text: '新款商品',
		value: 2
	}, {
		text: '活动商品',
		value: 3
	}, ];
	const option2 = [{
		text: '默认排序',
		value: 'a'
	}, {
		text: '好评排序',
		value: 'b'
	}, {
		text: '销量排序',
		value: 'c'
	}, ];



	const emit = defineEmits(['search']);
	const handleSearch = () => {
		emit('search', searchValue.value);
	};
</script>

<style lang="scss" scoped>
	.btnBox {
		color: orange;
		text-align: right;
		margin-right: 20px;
		padding: 10px;

		span {
			cursor: pointer;
		}
	}

	:deep(.van-dropdown-menu__bar) {
		box-shadow: none;

		.van-dropdown-menu__title {
			color: orange;
		}

		.van-dropdown-menu__title:after {
			border-color: transparent transparent orange orange;
		}
	}

	:deep(.searchBox) {
		.van-search {
			background-color: white;

			// 搜索框
			.van-search__content {
				background-color: white;
				border: 1px solid #cccccc;
				// border-radius: 5px;
				background-color: #f5f5f5;
			}
		}

		.van-search__action {
			color: #fff;
			background-color: #2FBC3C;
			border-radius: 16px;
			width: 40px;
			text-align: center;
			margin: 0 10px;
		}

		// 文字
		.search-confirm {
			display: flex;
			align-items: center;
			height: 100%;
			padding: 0 12px;

			.search-text {
				color: rgb(81, 164, 208);
				/* 蓝色搜索文字 */
				font-size: 14px;
				font-weight: 500;
				white-space: nowrap;
				cursor: pointer;
			}
		}
	}

	.topdropdown {
		position: relative;

		.dropdownLeft {
			position: absolute;
			bottom: 0;
			left: 16%;
			width: 20%;
			height: 3px;
			background-color: orange;
		}

		.dropdownRight {
			position: absolute;
			bottom: 0;
			right: 14%;
			width: 20%;
			height: 3px;
			background-color: orange;
		}
	}
</style>